<template>
	<view class="login card">
		<!-- 头像 -->
		<u--form labelPosition="top" :model="rawData" :rules="rules" ref="rawData" borderBottom labelWidth="auto">
			<view class="my-top">
				<u-form-item label=" " prop="avatarUrl" borderBottom="bottom" ref="avatarUrl" :borderBottom="false">
					<view class="my-top-img top-img">
						<u--image width="64" height="64" :src="rawData.avatarUrl || 'https://cdn.uviewui.com/uview/album/1.jpg'" shape="circle"></u--image>
						<button
							style="background-color: #429EAC;margin-top: 14rpx;padding:6rpx;width:auto"
							:customStyle="{ marginTop: '14rpx' }"
							size="mini"
							open-type="chooseAvatar"
							@chooseavatar="bindchooseavatar"
							v-model="rawData.avatarUrl"
						>
							点击获取头像
						</button>
					</view>
				</u-form-item>

				<u-form-item label="昵称" prop="nickName" ref="nickName">
					<view class="input">
						<input
							style="border-width: 0.5px !important;border-color: #dadbde !important;border-style: solid;border-radius: 4px;padding-top: 6px;padding-bottom: 6px;padding-left: 9px;padding-right: 9px;"
							@change="getNickname"
							type="nickname"
							placeholder="请输入昵称"
							v-model="rawData.nickName"
						/>
					</view>
				</u-form-item>
				<u-form-item label="获取手机号" prop="phoneNumber" ref="phoneNumber">
					<view class="input">
						<u-input type="primary" placeholder="请输入手机号" v-model="rawData.phoneNumber">
							<template slot="suffix">
								<u-button
									color="#429EAC"
									shape="circle"
									type="primary"
									open-type="getPhoneNumber"
									@getphonenumber="getPh"
									text="获取微信手机号"
									size="mini"
								></u-button>
							</template>
						</u-input>
					</view>
				</u-form-item>
			</view>
		</u--form>
		<view class="authentication" v-if="!comLogin">
			<view class="title">请选择您的登录类型:</view>
			<view class="authentication-text">
				<u-radio-group class="unit" v-model="authenticationValue">
					<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"></u-radio>
				</u-radio-group>
			</view>
		</view>

		<view class="button">
			<view class="buttonItem" v-if="comLogin && token">
				<view style="width:200rpx"><u-button shape="circle" type="primary" text="已登录"></u-button></view>
				<view style="width:200rpx"><u-button shape="circle" type="error" @click="clickUnbinding" text="解绑"></u-button></view>
			</view>
			<view class="buttonItem" v-else><u-button shape="circle" type="primary" @click="clickLogin" text="微信登录"></u-button></view>
		</view>
	</view>
</template>

<script>
import {
	oauthMiniUser,
	userIndex,
	/**
* @description: 修改会员个人信息
* @param {*名称	类型	必选	描述
// avatar	string	是	头像地址
// username	string	是	用户名
// nickname	string	是	昵称
// bio	string	是	个人简介}
* @return: {*}
* @author: 张昊
*/
	profile, // 修改会员个人信息
	/**
	* @description: 修改邮箱
	* @param {* 名称	类型	必选	描述
// email	string	是	邮箱
// captcha	string	是	验证码}
	* @return: {*}
	* @author: 张昊
	*/
	changeemail,
	/**
   * @description: 修改手机号
   * @param {*名称	类型	必选	描述
// mobile	string	是	手机号
// captcha	string	是	验证码}
   * @return: {*}
   * @author: 张昊
   */
	changemobile,
	getuserphonenumber // 手机号解码
} from '@/common/api.js';
export default {
	data() {
		return {
			value: [],
			list: {
				name: '已阅读并同意',
				disabled: false
			},
			// 请求回来的所有用户信息
			rawData: {
				avatarUrl: '',
				nickName: '',
				phoneNumber: ''
			},
			// 微信code
			code: '',
			token: '',
			// 基本信息填写
			showSex: false,
			model1: {
				userInfo: {
					nickname: '',
					username: '',
					phone: '',
					email: '',
					bio: '',
					sex: ''
				}
			},
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				},
				{
					name: '保密'
				}
			],
			rules: {
				// nickName: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写昵称',
				// 	// trigger: ['blur', 'change']
				// },
				avatarUrl: {
					type: 'string',
					required: true,
					message: '请获取头像'
					// trigger: ['blur', 'change']
				}
			},
			radio: '',
			switchVal: false,
			userData: {},
			// 认证教师或者学生
			authenticationValue: '学生',
			// 基本案列数据
			radiolist1: [
				{
					name: '学生',
					disabled: false
				},
				{
					name: '教师',
					disabled: false
				}
			]
		};
	},
	computed: {
		comLogin() {
			switch (false) {
				case !!this.rawData.avatarUrl:
					uni.$u.toast('请获取头像');
					return;
				case !!this.rawData.nickName:
					uni.$u.toast('请获取填写昵称');
					return;
				case !!this.rawData.phoneNumber:
					uni.$u.toast('请获取或填写手机号');
					return;
				default:
					return this.token;
			}
		}
	},

	methods: {
		// getPh(){
		// 	console.log(11)
		// },
		// 解绑按钮
		clickUnbinding() {
			// 清除本地信息 解绑
			uni.clearStorageSync();
			uni.navigateBack({
				delta: 1
			});
		},
		// 获取昵称
		getNickname(e) {
			console.log('获取昵称', e.detail.value);
			this.rawData.nickName = e.detail.value;
			if (this.rawData.nickName) {
				uni.setStorageSync('userData', { ...uni.getStorageSync('userData'), nickName: this.rawData.nickName });
				this.clickLogin();
			}
		},
		// 获取头像
		bindchooseavatar(e) {
			this.rawData.avatarUrl = e.detail.avatarUrl;
			if (this.rawData.avatarUrl) {
				uni.setStorageSync('userData', { ...uni.getStorageSync('userData'), avatarUrl: this.rawData.avatarUrl });
				this.clickLogin();
			}
		},
		async clickLogin() {
			this.$refs.rawData.validate();
			if (!this.comLogin) {
				// if (this.value.length) {
				await uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.code = loginRes.code;
						console.log('codee2211111111111111111111111', this.code);
						uni.getUserInfo({
							provider: 'weixin',
							success: async infoRes => {
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
								console.log('用户昵称为11：' + infoRes);
								console.log(infoRes);
								// this.rawData = {...infoRes.rawData};
								let { token } = await oauthMiniUser({ params: { code: this.code, rawData: { ...infoRes.rawData, ...this.rawData } } });

								// token存储
								if (token) {
									uni.setStorageSync('token', token);
									uni.setStorageSync('tokenTime', new Date().getTime());
									uni.$u.toast('登录成功');
									this.token = token;
								}
								// 基础信息
								if (this.rawData) {
									console.log('存储之前', this.rawData);
									uni.setStorageSync('userData', this.rawData);
								}
								await this.loginInfo();
							}
						});
					}
				});
			} else {
				// console.log('请先填写完整信息');
			}
		},

		// 获取登录信息
		async loginInfo() {
			try {
				if (uni.getStorageSync('userData')) {
					this.rawData = uni.getStorageSync('userData');
				}
				if (uni.getStorageSync('token')) {
					this.token = uni.getStorageSync('token');
					// 获取用户信息
					this.userData = await userIndex();
					if (this.rawData.phoneNumber) {
						uni.setStorageSync('userData', { ...this.userData, phoneNumber: this.rawData.phoneNumber, ...this.rawData });
					}
				}
			} catch (e) {
				console.log('登录过期或者未登录');
			}
		},

		// 获取手机号
		async getPh(e) {
			if (!this.code || !e.detail.encryptedData) {
				// return false;
			}

			console.log('eee', e);
			let {
				phone_info: { phoneNumber }
			} = await getuserphonenumber({ params: { code: e.detail.code } });
			this.rawData.phoneNumber = phoneNumber;
			console.log('手机号', phoneNumber);
			uni.setStorageSync('userData', { ...this.userData, phoneNumber: phoneNumber, ...this.rawData });
			// uni.setStorageSync('rawData', { ...this.userData, phoneNumber: phoneNumber, ...this.rawData });
			this.comLogin && this.clickLogin();
			await this.loginInfo();
			// 登录完成后,验证是否是老师
			if (this.authenticationValue === '教师')
				if (this.userData && this.userData.is_teacher) {
					uni.$u.toast('认证教师登录成功');
				} else {
					uni.navigateTo({
						url: '/pages/mine/attestation/attestation'
					});
				}
		}
	},
	created() {
		if (uni.getStorageSync('userData')) {
			this.rawData = uni.getStorageSync('userData');
		}
	},
	onShow() {
		this.loginInfo();
	}
};
</script>

<style lang="scss">
.login {
	// width: 100vw;
	height: 80vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	.button {
		// width: 300rpx;
		// height: 200rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-bottom: 56rpx;
		.buttonItem {
			width: 600rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
		}
	}
	.text {
		width: 100vw;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.active {
			color: #2979ff;
			font-size: 24rpx;
		}
	}
}

.my-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	// align-items: flex-end;
	padding: 28rpx;
	color: #fff;
	font-size: 14px;
	// height: 122px;
	.input {
		width: 600rpx;
	}
}
.my-top-img {
	// width: 200rpx;
	// height: 64rpx;
	border-radius: 50%;
	margin-right: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top-img {
	// width: 130rpx;
}
.my-top-title {
	font-size: 16px;
	color: #000;
}

.my-top-flex {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}

.authentication {
	width: 300rpx;

	.title {
		margin: 14rpx 0;
	}
	.authentication-text {
		margin-left: 28rpx;
		.unit {
			display: flex;

			justify-content: space-between;
			width: 300rpx;
		}
	}
}

.hao-form {
	margin-left: 28rpx;
	// margin-top: 40 * 2rpx;
}
</style>
